window.addEventListener("load", function () {
	// 【头部粒子效果】
	const config = {
		selector: "#bannerBg",
		vx: 4, //点x轴速度,正为右，负为左
		vy: 4, //点y轴速度
		height: 2, //点高宽，其实为正方形，所以不宜太大
		width: 2,
		count: 100, //点个数
		color: "#000", //点颜色
		stroke: "0,0,0", //线条颜色
		dist: 6000, //点吸附距离
		e_dist: 20000, //鼠标吸附加速距离
		max_conn: 10, //点到点最大连接数
	};
	//调用
	CanvasParticle(config);
	// 头部移入效果
	// $("#headerNav li")
	// console.log($("#headerNav li"));
	$("#headerNav li").forEach((v) => {
		v.addEventListener("mouseover", function () {
			$("#headerNav li").forEach((each) => {
				each.className = "";
			});
			v.className = "active";
		});
	});
	// 【将APT的tab区进行渲染】
	let APIdata = [
		{ times: 4000, price: 1200, unitPrice: "0.3000" },
		{ times: 8000, price: 2000, unitPrice: "0.2500" },
		{ times: 40000, price: 8000, unitPrice: "0.2000" },
	];

	APIdata.forEach(function (v) {
		// console.log(v);
		$(
			".contPrice"
		).innerHTML += `<li data-price=${v.price} data-unitPrice=${v.unitPrice}>${v.times}次</li>`;
	});
	$(".contPrice li")[1].classList.add("Pactive");
	$("#rgPrice").innerHTML = `<strong style="color: red" class="fz-14">￥${
		$(".contPrice li")[1].dataset.price
	}</strong>
	(约${$(".contPrice li")[1].dataset.unitprice}元/次),仅限企业实名购买`;
	//【价格移入显示对应价目】

	$(".contPrice li").forEach(function (v) {
		v.addEventListener("click", function () {
			// 如果类名为default的时候,排他,其他效果清空
			//console.log(!this.classList.contains("default")); //false
			if (!this.classList.contains("default")) {
				$(".contPrice li").forEach(function (item) {
					item.classList.remove("Pactive");
				});
				this.classList.add("Pactive");
				//【增加新功能,点击tab按钮,在下方联动生成对应的价格数据】
				//思路:1.先将渲染拼接中加上H5属性data- ;2.因为要排除掉第一个扫码,所有要在点击事件中
				//的if里面写.直接获取指定区间的节点 = 拼接的HTML结构(dataset获取H5属性);3.拼接完后优
				//化,此时要让第一个显示,所有此时的this是$(".contPrice li")[1]
				$(
					"#rgPrice"
				).innerHTML = `<strong style="color: red" class="fz-14">￥${this.dataset.price}</strong>
				(约${this.dataset.unitprice}元/次),仅限企业实名购买`;
			}
		});
	});
	// 【新增功能,点击tab出现对应样式,点击api标题出现对应内容(具体写法在公共样式中)】
	tab(".title p", "active", "#lfCont div", "on");
	
	//尾部,回到顶部功能
	//【回到顶部】
	$(".goTop").style.opacity = "0";
	this.addEventListener("scroll", function () {
		if ($(".goTop") < 3000) {
			$(".goTop").style.opacity = "0";
		} else {
			$(".goTop").style.opacity = "1";
		}
	});
	$(".goTop").addEventListener("click", function () {
		window.scroll({
			top: 0,
			left: 0,
			behavior: "smooth",
		});
	});
});
